<!--  -->
<template>
  <view class="fz-14 mb-20 bgf forBox" @click="goDetails">
    <view class="disFlxJS linh-50 mx-15 borderBottom">
      <view>{{ item.applylevelName }}发起</view>
      <view>{{ item.createTime }}</view>
    </view>
    <view class="disFlxJS py-24 mx-15 borderBottom">
      <view class="tc leftBox">
        <view class="fz-16 fw-7">
          <text>{{ item.applyUserName }}</text>
          <text class="ali-icon ml-5">&#xe65f;</text>
        </view>
        <!-- <view class="ov-1 pt-6 pb-3">1</view> -->
        <view class="ov-1 fz-12 mt-10 color4">{{ item.orgName }}</view>
      </view>
      <view class="tc">
        <image
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/order-icon-1.png"
          style="width: 134rpx; height: auto"
          mode="widthFix"
        />
        <view class="fz-12 color1" :style="{ color: statusColor }">{{ getStatusText }}</view>
      </view>
      <view class="tc rightBox">
        <view class="fz-16 fw-7">
          <text>{{ item.leadingName }}</text>
          <text class="ali-icon ml-5">&#xe65f;</text>
        </view>
        <!-- <view class="ov-1 pt-6 pb-3">2</view> -->
        <view class="ov-1 fz-12 mt-10 color4">{{ item.toOrgName }}</view>
      </view>
    </view>
    <view
      v-if="item.auditStatus === OrderAuditStateEnum.UNREVIEWED"
      class="btnBox disFlx flexEnd py-12 px-15"
    >
      <view>
        <button class="btn">审核</button>
      </view>
    </view>
    <template v-if="item.phaseState === PhaseStateEnum.FINISH">
      <view
        v-if="
          (assType === AssTypeEnum.INNER && userInfo.sysUser.userId === item.auditUserId) ||
          (assType === AssTypeEnum.OUTSIDE && userInfo.sysUser.userId === item.toAuditUserId)
        "
        class="btnBox disFlx flexEnd py-12 px-15"
      >
        <view>
          <button class="btn" @click.stop="handleToRoom">进入群聊</button>
        </view>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
  import type { ContactsReviewListResult } from '@/api/admin/types';
  import { navigateTo } from '@/router';
  import { reactive, type PropType, ref, computed } from 'vue';

  import dictionary from '@/utils/dictionary';
  import { AssTypeEnum, PhaseStateEnum, OrderAuditStateEnum } from '@/enums/orderEnum';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';
  import { AuditStatusEnum } from '@/enums/membershipEnum';

  const props = defineProps({
    item: {
      type: Object as PropType<ContactsReviewListResult>,
      required: true,
    },
    assType: {
      type: Number as PropType<AssTypeEnum>,
      required: true,
    },
  });

  const useUser = useUserStoreWithOut();
  const { userInfo } = storeToRefs(useUser);

  const emit = defineEmits(['refresh']);

  // function getPhaseStateText(phaseState: PhaseStateEnum) {
  //   const dicts = dictionary.getLocal('phaseState');
  //   const item = dicts.find((f) => f.dictValue === phaseState);
  //   return item?.dictLabel;
  // }

  const colors = reactive({
    success: '#DAA03E',
    await: '#2878FF',
    err: '#FF3F3F',
  });

  const statusColor = ref(colors.await);

  const getStatusText = computed(() => {
    const v = props.item;

    const dicts = dictionary.getLocal('phaseState');
    const item = dicts.find((f) => f.dictValue === v.phaseState);
    let text = item?.dictLabel;
    switch (v.phaseState) {
      case PhaseStateEnum.SUBSCRIBE:
      case PhaseStateEnum.PAID:
        /** 流程未完 */
        text = getAuditStatusText();
        break;
      case PhaseStateEnum.AUDIT:
        /** 流程未完 */
        text = getAuditStatusText();
        break;
      case PhaseStateEnum.CONTACT:
        /** 流程未完 */
        text = getAuditStatusText();
        break;
      case PhaseStateEnum.FINISH:
    }
    return text;
  });

  function getAuditStatusText(): string {
    const v = props.item;
    let text = '';
    switch (v.auditStatus) {
      case OrderAuditStateEnum.PASSED:
        text = '已通过';
        statusColor.value = colors.success;
        break;
      case OrderAuditStateEnum.UNREVIEWED:
        text = '待审核';
        statusColor.value = colors.await;
        break;
      case OrderAuditStateEnum.REJECT:
        text = '未通过';
        statusColor.value = colors.err;
        break;
    }
    return text;
  }

  const goDetails = function () {
    navigateTo({
      name: 'reviewDetails',
      options: {
        id: props.item.id,
        assType: props.assType,
        callback: () => emit('refresh'),
      },
    });
  };

  //进入群聊
  function handleToRoom() {
    console.log('orderCode--->', props.item.orderCode);
    navigateTo({
      name: 'TUIChat',
      options: { conversationID: `GROUP${props.item.orderCode}` },
    });
  }
</script>
<style lang="scss" scoped>
  $color-primary: #2878ff;
  $color-error: #ff3434;
  $color-warning: #ffa944;
  $color-font: #808080;
  .color1 {
    color: $color-primary;
  }

  .color2 {
    color: $color-warning;
  }

  .color3 {
    color: $color-error;
  }

  .color4 {
    color: $color-font;
  }

  .btnBox {
    .btn {
      // width: 160rpx;
      padding: 0 30rpx;
      height: 60rpx;
      line-height: 60rpx;
      color: #ffffff;
      background: $color-primary;
      font-size: 28rpx;
    }
  }

  .tc {
    text-align: center;
  }

  .leftBox,
  .rightBox {
    width: 246rpx;
    overflow: hidden;
  }

  .ali-icon {
    color: #ffa944;
  }
</style>
